// 轮播图功能
document.addEventListener('DOMContentLoaded', function() {
    // 轮播图数据
    const slides = [
        {
            image: 'images/banner1.jpg',
            title: '新版本「星火燎原」现已上线',
            description: '探索全新剧情，解锁限定角色'
        },
        {
            image: 'images/banner2.jpg',
            title: '限时活动「星火试炼」',
            description: '参与活动赢取丰厚奖励'
        },
        {
            image: 'images/banner3.jpg',
            title: '新角色「星火」登场',
            description: '掌握星火之力，成为最强战士'
        }
    ];

    let currentSlide = 0;
    const sliderContainer = document.querySelector('.slider-container');
    const dots = document.querySelectorAll('.dot');

    // 初始化轮播图
    function initSlider() {
        // 清空现有内容
        sliderContainer.innerHTML = '';
        
        // 创建新的轮播图内容
        slides.forEach((slide, index) => {
            const slideElement = document.createElement('div');
            slideElement.className = `slide ${index === 0 ? 'active' : ''}`;
            slideElement.innerHTML = `
                <img src="${slide.image}" alt="${slide.title}">
                <div class="slide-content">
                    <h2>${slide.title}</h2>
                    <p>${slide.description}</p>
                    <button class="cta-button">了解更多</button>
                </div>
            `;
            sliderContainer.appendChild(slideElement);
        });
    }

    // 切换轮播图
    function changeSlide(index) {
        const allSlides = document.querySelectorAll('.slide');
        allSlides.forEach(slide => slide.classList.remove('active'));
        dots.forEach(dot => dot.classList.remove('active'));

        allSlides[index].classList.add('active');
        dots[index].classList.add('active');
        currentSlide = index;
    }

    // 自动轮播
    function autoSlide() {
        currentSlide = (currentSlide + 1) % slides.length;
        changeSlide(currentSlide);
    }

    // 点击圆点切换轮播图
    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            changeSlide(index);
        });
    });

    // 初始化轮播图并开始自动播放
    initSlider();
    let slideInterval = setInterval(autoSlide, 5000);

    // 鼠标悬停时暂停自动播放
    const heroSlider = document.querySelector('.hero-slider');
    heroSlider.addEventListener('mouseenter', () => {
        clearInterval(slideInterval);
    });

    heroSlider.addEventListener('mouseleave', () => {
        slideInterval = setInterval(autoSlide, 5000);
    });

    // 标签切换功能
    const tabs = document.querySelectorAll('.tab');
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            // 这里可以添加内容切换的逻辑
        });
    });

    // 搜索框功能
    const searchInput = document.querySelector('.search-box input');
    const searchButton = document.querySelector('.search-box button');

    searchButton.addEventListener('click', () => {
        const searchTerm = searchInput.value.trim();
        if (searchTerm) {
            // 这里可以添加搜索逻辑
            console.log('搜索:', searchTerm);
        }
    });

    searchInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            const searchTerm = searchInput.value.trim();
            if (searchTerm) {
                // 这里可以添加搜索逻辑
                console.log('搜索:', searchTerm);
            }
        }
    });

    // 登录注册按钮事件
    const loginBtn = document.querySelector('.login-btn');
    const registerBtn = document.querySelector('.register-btn');

    loginBtn.addEventListener('click', () => {
        // 跳转到登录页面
        window.location.href = 'login.html';
    });

    registerBtn.addEventListener('click', () => {
        // 跳转到注册页面
        window.location.href = 'register.html';
    });
});